<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.wheelmenu.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/wheelmenu.css"> 
<style type="text/css">
    html {
      height: 100%;
    }
    body {
      background: #f4eedf;
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
    
    .wrapper {
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto; 
    	overflow: hidden;
    }
    
    a {
      text-decoration: none;
    }
    
    
    h1, h2 {
      width: 100%;
      float: left;
    }
    h1 {
      margin-top: 100px;
      color: #555;
      margin-bottom: 5px;
    }
    h2 {
      color: #999;
      font-weight: 100;
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .pointer {
      color: #34495e;
      font-family: 'Pacifico', cursive;
      font-size: 22px;
      margin-top: -15px;
    }

    .wheel-button, .wheel-button:visited {
      line-height: 35px;
      font-weight: bold;
      font-size: 36px;
      background: #df4727; 
      padding: 10px 11px;
      text-align: center;
      border-radius: 50px;
      width: 35px;
      height: 35px;
      color: white;
      display: block;
      margin: 70px auto 20px;
      border: 3px solid #92311e;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    .wheel-button:hover{ 
      color: white;
    }
    
    .wheel-button.ne {
      border-color: white;
      background: #1ABC9C;
      color: #34FFFF;
      position: absolute;
      bottom: 10px;
      left: 10px;
    }
    
    .wheel-button.nw {
      border-color: white;
      background-color: #E67E22;
      color: #FFFC44;
      position: absolute;
      bottom: 10px;
      right: 10px;
    }

    .wheel-button span, .wheel span{
      position: relative;
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      display: block;
    }

    .wheel-button.active span{
      transform: rotate(135deg);
      -ms-transform: rotate(135deg); /* IE 9 */
      -webkit-transform: rotate(135deg); /* Safari and Chrome */
    }

    .wheel li a, .wheel li a:visited{
      background: rgba(0,0,0,0.65);
      border-radius: 50px;
      font-weight: bold;
      padding: 10px;
      text-align: center;
      width: 20px;
      height: 20px;
      border: 1px solid black;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      color: white;
      -moz-transition: all 0.25s ease;
      -webkit-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      transition: all 0.25s ease;
    }

    .wheel li a:hover{
      background: rgba(0,0,0,0.8);
    }

    .main {
      float: left;
      width: 100%;
      margin: 0 auto;
    }
    
    .reload, .btn{
      display: inline-block;
      border: 4px solid #FFF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: rgba(255,255,255, 0.75);
      display: inline-block;
      line-height: 100%;
      padding: 0.7em;
      text-decoration: none;
      opacity: 0.7;
      color: #555;
      width: 100px;
      line-height: 140%;
      font-size: 17px;
      font-family: open sans;
      font-weight: bold;
    }
    .reload:hover, .btn:hover {
      background: white;
    }
    .btn {
      width: 200px;
    }
    .btns {
      width: 230px;
      margin: 50px auto;
    }
    .credit {
      text-align: center;
      color: #999;
      padding: 10px;
      margin: 0 0 40px 0;
      background: rgba(255,255,255,0.25);
      float: left;
      width: 100%;
    }
    .credit a {
      color: #555;
      text-decoration: none;
      font-weight: bold;
    }
	</style>
	<link rel="stylesheet" type="text/css" href="css/wheelmenu.css" />
	<script>
	  $(document).ready(function(){
			$(".wheel-button").wheelmenu({
        trigger: "hover",
        animation: "fly",
        animationSpeed: "fast"
      });
		});
		
	</script>

</head>
<body>
<div class="wrapper">
	  <div class="main">
	    <a href="#wheel" class="wheel-button">
	     <span>+</span>
	    </a>
       <ul id="wheel"  data-angle="all">
        <li class="item"><a href="#home">A</a></li>
        <li class="item"><a href="#home">B</a></li>
        <li class="item"><a href="#home">C</a></li>
        <li class="item"><a href="#home">D</a></li>
        <li class="item"><a href="#home">E</a></li>
        <li class="item"><a href="#home">F</a></li>
        <li class="item"><a href="#home">G</a></li>
        <li class="item"><a href="#home">H</a></li>
        <li class="item"><a href="#home">I</a></li>
        <li class="item"><a href="#home">J</a></li>
       </ul>
    </div>
  </div>
</body>
</html>